<template>
  <div class="welcome-container">
    <!-- 顶部导航 -->

    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col items-center justify-center py-12 px-4">
      <div class="text-center w-full">
        <!-- 主Logo -->
        <div class="mb-16 flex justify-center">
          <svg class="w-[clamp(250px,80vw,500px)] h-[clamp(120px,40vw,240px)]" viewBox="0 0 200 80" xmlns="http://www.w3.org/2000/svg">
            <!-- A字母 - 黑色为主 -->
            <rect x="0" y="0" width="60" height="80" fill="#000000" />
            <polygon points="10,70 30,10 50,70" fill="#FFD166" />
            <text x="30" y="55" font-family="Arial, sans-serif" font-size="40" font-weight="bold" text-anchor="middle" fill="white">A</text>
            
            <!-- B字母 - 黑色为主 -->
            <rect x="70" y="0" width="60" height="80" fill="#000000" />
            <circle cx="90" cy="25" r="15" fill="#FF6B6B" />
            <circle cx="90" cy="55" r="15" fill="#FF6B6B" />
            <rect x="95" y="10" width="20" height="30" rx="5" fill="#FF6B6B" />
            <text x="100" y="55" font-family="Arial, sans-serif" font-size="40" font-weight="bold" text-anchor="middle" fill="white">B</text>
            
            <!-- C字母 - 黑色为主 -->
            <rect x="140" y="0" width="60" height="80" fill="#000000" />
            <path d="M160,10 Q200,10 200,40 Q200,70 160,70" stroke="#4ECDC4" stroke-width="8" fill="none" />
            <text x="170" y="55" font-family="Arial, sans-serif" font-size="40" font-weight="bold" text-anchor="middle" fill="white">C</text>
          </svg>
        </div>
        
        <!-- 系统名称 -->
        <h1 class="text-[clamp(3.5rem,12vw,8rem)] font-bold mb-16 text-shadow whitespace-nowrap">
          ABC会员管理系统
        </h1>
        
        
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-gray-300 py-8">
      <div class="container mx-auto px-4 text-center">
        <p>&copy; 2025 ABC店铺. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'WelcomePage',
  mounted() {
    // 如果需要在组件挂载后执行一些操作，可以在这里添加
    document.title = 'ABC会员管理系统'
  }
}
</script>

<style scoped>
/* Tailwind CSS 样式已通过类名应用 */
.welcome-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

main {
  backdrop-filter: blur(5px);
  flex: 1;
}

header {
  backdrop-filter: blur(10px);
}

/* 导航链接样式 */
nav ul li a {
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #333;
}

/* 功能卡片样式 */
.grid div {
  transition: all 0.3s ease;
}

.grid div:hover {
  transform: translateY(-5px);
}

/* 页脚链接样式 */
footer a {
  transition: color 0.3s ease;
}

/* 添加响应式调整 */
@media (max-width: 768px) {
  /* 调整主内容区域上下边距 */
  main {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* 保持标题不换行 */
  h1 {
    white-space: nowrap;
    transform: scale(0.9);
  }
  
  /* 调整页脚链接间距 */
  footer .mt-4 {
    flex-direction: column;
    gap: 0.5rem;
  }
}
</style>